<template>
  <div>
    <mt-header title="历史记录">
      <mt-button icon="back" slot="left" @click="gobackIDcard">返回</mt-button>
      <mt-button slot="right" @click="cleanHistory">清空历史</mt-button>
    </mt-header>
    <div class="noHistory" v-if="noHistory">
      <div class="noHistoryImg"></div>
      <div class="noHistoryText">还没有记录哦，快去学习吧~</div>
    </div>
    <div class="page-loadmore">
      <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff"></mt-spinner>
        <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom"
          @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="page-loadmore-list" v-if="list>0">
            <li v-for="(item,index) in articleList" :key="index" class="page-loadmore-listitem">
              <img class="article-list-img" :src="item.cover" alt="获取失败">
              <div class="router" @click="goDetail(item.type,item.id)">
                <div class="article-list-content">
                  <p class="list-content-tt" v-text="item.title"></p>
                  <p class="list-content-intro" v-text="item.description"></p>
                </div>
              </div>

            </li>
          </ul>
          <div slot="top" class="mint-loadmore-top" style="text-align:center">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
          </div>
          <!-- <div v-if="allLoaded" style="text-align:center;">无更多内容了</div> -->
          <load-more v-if="allLoaded" :show-loading="false" :tip="$t('无更多内容了')" background-color="#fbf9fe"></load-more>
          <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
            <span v-show="bottomStatus === 'loading'">
              <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
            </span>
          </div>
        </mt-loadmore>
      </div>
      <!-- <div class="page-footer">页面底部</div> -->
    </div>
  </div>

</template>

<script>
  import {
    Tab,
    TabItem,
    ButtonTab,
    ButtonTabItem,
    LoadMore,
    Divider
  } from "vux";

  import {
    getHistory_Axios,
    deleteHistory_Axios,
  } from "./axios/api";

  export default {
    components: {
      Tab,
      TabItem,
      ButtonTab,
      ButtonTabItem,
      LoadMore,
      Divider
    },
    methods: {
      goDetail(type, id) {
        console.log('type', type);
        console.log('id', id);
        if (type == 1) {
          this.$router.push({
            path: '/Article/ArticleDetail',
            query: {
              id: parseInt(id)
            }
          })
        } else {
          this.$router.push({
            path: '/Video/VideoDetail',
            query: {
              id: parseInt(id)
            }
          })
        }
      },
      //上拉加载
      handleBottomChange(status) {
        this.moveTranslate = 1;
        this.bottomStatus = status;
      },
      loadBottom() {
        this.handleBottomChange("loading"); //上拉时 改变状态码
        this.pageNum += 1;
        setTimeout(() => {
          //上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
          console.log('this.totalPage', this.totalPage);
          if (this.pageNum < this.totalPage) {
            //最多下拉三次
            this.list += 10; //上拉加载 每次数值加10
          } else {
            this.allLoaded = true; //模拟数据加载完毕 禁用上拉加载
            console.log('this.allLoaded', this.allLoaded);
          }
          this.getHistory(this.list);
          this.handleBottomChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onBottomLoaded();
        }, 500);
      },
      handleTopChange(status) {
        this.moveTranslate = 1;
        this.topStatus = status;
      },
      translateChange(translate) {
        const translateNum = +translate;
        this.translate = translateNum.toFixed(2);
        this.moveTranslate = (1 + translateNum / 70).toFixed(2);
      },
      loadTop() {
        //下拉刷新 模拟数据请求这里为了方便使用一次性定时器
        this.handleTopChange("loading"); //下拉时 改变状态码
        this.allLoaded = false; //下拉刷新时解除上拉加载的禁用
        setTimeout(() => {
          this.getHistory(this.list);
          this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onTopLoaded();
        }, 500);
      },
      getHistory(size) {
        let userId = sessionStorage.getItem("id");
        getHistory_Axios(userId).then(response => {
            console.log('response', response);
            this.articleList = response.data.data;
            // if (this.totalPage == 0) {
            //   this.totalPage = response.data.data.totalPages;
            // }
            if (this.articleList.length == 0) {
              this.noHistory = true;
            }
          })
      },
      cleanHistory() {
        if (this.articleList.length == 0) {
          this.$vux.toast.show({
            text: '无历史记录',
            width: '15rem',
            type: 'warn',
            time: 600
          })
        } else {
          let userId = sessionStorage.getItem("id");
            deleteHistory_Axios(userId).then(response => {
              this.articleList = response.data.data;
              this.$vux.toast.show({
                text: '清空记录成功',
                width: '15rem',
                time: 600
              })
            })
        }
      },
    },
    data() {
      return {
        list3: ["我的文章", "我的视频"],
        demo3: "我的文章",
        //上拉加载
        pageNum: 1, //页码
        InitialLoading: true, //初始加载
        list: 10, //数据
        allLoaded: false, //数据是否加载完毕
        bottomStatus: "", //底部上拉加载状态
        wrapperHeight: 0, //容器高度
        topStatus: "", //顶部下拉加载状态
        translate: 0, //
        moveTranslate: 0,
        articleList: [],
        totalPage: 0,
        userId: sessionStorage.getItem('id'),
        noHistory: false,
      };
    },
    mounted() {
      let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
      if (windowWidth > 768) {
        //这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 130;
      } else {
        this.wrapperHeight = document.documentElement.clientHeight - 90;
      }
      this.getHistory();
    }
  };

</script>


<style lang="scss" scoped>
  .noHistory {
    width: 100%;
    height: 100vh;
    font-size: 1.6rem;
    color: #999;
    .noHistoryImg {
      width: 100%;
      height: 50vh;
      margin-bottom: 2rem;
      background: url('../assets/nohistory.png')no-repeat;
      background-size: 100% 100%;
    }
  }

  .page-title,
  .page-footer {
    text-align: center;
    position: absolute;
  }

  .page-title {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .page-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .page-title+* {
    margin-top: 50px;
  }

  @media (min-width: 768px) {
    .page-title {
      height: 90px;
      line-height: 90px;
    }
    .page-title+* {
      margin-top: 90px;
    }
  }

  .page-loadmore-listitem {
    display: flex;
    height: 10rem;
    line-height: 10rem;

  }

  .page-loadmore-listitem {
    border-top: 1px solid #eee
  }

  .page-loadmore-wrapper {
    overflow: scroll;
    text-align: center;

  }

  .page-loadmore-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;

  } //文章列表图片
  .article-list-img {
    width: 7rem;
    height: 7rem;
    margin: 1.5rem;
    flex: 1;
  }

  .router {
    flex: 3;
  }

  .article-list-content {
    display: flex;
    flex: 2;
    flex-direction: column;
    margin: 1.5rem 0.5rem 1.5rem 1rem;
    .list-content-tt {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.4rem;
      font-weight: 600;
    }
    .list-content-intro {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.2rem;
      color: #bababa;
    }
    .list-content-time {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      line-height: 2rem;
      text-align: right;
      font-size: 1.2rem;
      color: #bababa;
      img {
        width: 2rem;
        height: 2rem;
        margin-left: 0.5rem;
      }
    }
  }

</style>
